<template>
  <div>
    <!--*** 隐私设置 ***-->
    <div class="info-set-c-ys">
      <div class="info-set-item-head info-set-c-ys-head">
        <span>隐私设置</span>
      </div>
      <div class="info-set-c-ys-con">
        <!--** 此处静态默认第一个设置选中 ***-->
        <input type="radio" v-model="silentValue" value="0" name="info-set-ys-ra" checked="checked">
        <span>所有人都可以给我发私信</span>
        <i>（不包括你屏蔽的用户）</i>
        <p>
          <input type="radio" v-model="silentValue" value="1" name="info-set-ys-ra">
          <span>不接收任何人的私信</span>
          <i>（选择此项后，您依然可以收到系统自动发送的通知私信）</i>
        </p>
        <button @click="modifyMessageSetting()">保存</button>
      </div>
    </div>
    <!--*** 隐私设置 end ***-->
    <!--*** 屏蔽用户 ***-->
    <div class="info-set-c-pb">
      <div class="info-set-item-head info-set-c-pb-head">
        <span>屏蔽用户</span>
      </div>
      <div class="info-set-c-pb-con">
        <input v-model="blackName" type="text" placeholder="输入要屏蔽的用户" id="userName">
        <button @click="addUserBlack()">屏蔽</button>
      </div>
    </div>
    <!--*** 屏蔽用户 end ***-->
    <!--*** 已屏蔽的用户 ***-->
    <div class="info-set-c-pbyh">
      <div class="info-set-item-head info-set-c-pbyh-head">
        <span>已屏蔽用户</span>
      </div>
      <div class="info-set-c-pbyh-con">
        <ul id="fieldUserList">
          <li v-for="(item, index) in userBlack" :key="index">
            <a href="javascript:void(0)">{{item.blackerUserName}}</a>
            <span @click="removeUserBlack(item)">移除</span>
          </li>
        </ul>
      </div>
    </div>
    <!--*** 已屏蔽的用户 end ***-->
  </div>
</template>
<script>
import * as api from '@/service/api'
export default {
  data () {
    return {
      loaing: false,
      userSetting: {},
      silentValue: '0',
      blackName: '',
      userBlack: []
    }
  },
  created () {
    this.getMessageSetting()
    this.getUserBlack()
  },
  computed: {
    userId () {
      return this.$store.state.me.user.userId
    }
  },
  methods: {
    async getMessageSetting () {
      try {
        let res = await api.getMessageSetting({
          userId: this.userId
        })
        this.silentValue = res.data.settingValue
      } catch (e) {
        console.log(e)
      }
    },
    async getUserBlack () {
      try {
        let res = await api.getUserBlack({
          userId: this.userId
        })
        this.userBlack = res.data
      } catch (e) {
        console.log(e)
      }
    },
    async addUserBlack () {
      try {
        await api.addUserBlack({
          userId: this.userId,
          blackerUserName: this.blackName
        })
        window.layer.msg('添加成功！', {
          icon: 1,
          time: 800
        })
        this.getUserBlack()
      } catch (e) {
        console.log(e)
      }
    },
    async removeUserBlack (item) {
      try {
        await api.removeUserBlack({
          id: item.id
        })
        window.layer.msg('移除成功！', {
          icon: 1,
          time: 800
        })
        this.getUserBlack()
      } catch (e) {
        console.log(e)
      }
    },
    async modifyMessageSetting () {
      try {
        await api.modifyMessageSetting({
          userId: this.$store.state.me.user.userId,
          settingValue: this.silentValue
        })
        window.layer.msg('保存成功！', {
          icon: 1,
          time: 800
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
